<template>
	<div class="query-rule">
<!--
		<el-select v-model="selectedField" placeholder="Field" size="small" style="width: 120px; margin-right: 10px">
			<el-option v-for="field in availableFields" :key="field.value" :label="field.label" :value="field.value" />
		</el-select>
-->
		<slot name="default" :scope="model">

		</slot>

		<el-button size="small" @click="$emit('addRule')">+ 条件</el-button>
		<el-button size="small" @click="$emit('addGroup')">+ 条件组</el-button>

		<el-button size="small" type="danger" @click="$emit('delete')">
			删除
		</el-button>

	</div>
</template>

<script>
	export default {
		name: 'QueryRule',
		props: {
			modelValue: {
				type: Object,
				required: true
			}
		},
		emits: ['update:modelValue', 'delete'],
		data() {
			return {
				availableFields: [{
						label: 'First Name',
						value: 'FirstName'
					},
					{
						label: 'Country',
						value: 'Country'
					}
				]
			}
		},
		computed: {
			model: {
				get() {
					return this.modelValue
				},
				set(value) {
					this.$emit('update:modelValue', value)
				}
			},
			selectedField: {
				get() {
					return this.model.field
				},
				set(value) {
					this.model.field = value
					const selected = this.availableFields.find(f => f.value === value)
					if (selected) {
						this.model.type = selected.type || 'string'
					}
				}
			}
		}
	}
</script>

<style scoped>
	.query-rule {
		display: flex;
		align-items: center;
		margin: 5px 0;
		padding: 5px 0;
	}
</style>
